<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-11 14:14:15
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-12 16:22:43
 * @FilePath: \ant-design-vue-jeecg-master\src\views\taskManagement\taskAllocation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="taskAllocation">
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="1" header="资源分配">
        <h2>
          导弹资源分配 <a-button @click="handleConfig" type="primary" style="margin-left: 10px"> 配置详情</a-button>
        </h2>
        <a-form-model :model="form" :label-col="labelCol1" :wrapper-col="wrapperCol1">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="指控车">
                <!-- <a-select v-model="form1.car" placeholder="请选择">
                  <a-select-option value="1"> 指控车1 </a-select-option>
                  <a-select-option value="2"> 指控车2 </a-select-option>
                  <a-select-option value="3"> 指控车3 </a-select-option>
                  <a-select-option value="4"> 指控车4 </a-select-option>
                </a-select> -->
                <a-input v-model="form1.car" read-only></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="导弹总数">
                <!-- <a-input-number
                  read-only
                  :style="{ width: '100%' }"
                  :max="32"
                  :min="0"
                  v-model="form1.ballNum"
                  placeholder="最多32个"
                ></a-input-number> -->
                <a-input read-only v-model="form1.ballNum"></a-input>
                <!-- <a-select v-model="form1.ball" placeholder="请选择">
                  <a-select-option value="1"> 导弹1 </a-select-option>
                  <a-select-option value="2"> 导弹2 </a-select-option>
                  <a-select-option value="3"> 导弹3 </a-select-option>
                  <a-select-option value="4"> 导弹4 </a-select-option>
                </a-select> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="分配信道数">
                <a-input v-model="form1.pll" read-only />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-tabs default-active-key="1" tab-position="top">
            <a-tab-pane key="1" tab="导弹1">
              <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路工作参数配置">
                      <a-input v-model="form.region" placeholder="请输入信道号（可以连续，用,号区分）"></a-input>
                      <pool1
                        ref="pool"
                        :total="1920"
                        :small="3"
                        style="width: 100%; height: 250px; overflow-y: auto; padding: 3px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="ballConfig('4-信道')" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="handleSend('4信道授权信息')" type="primary" style="margin-left: 10px">
                    发送</a-button
                  >
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令1">
                      <div :style="{ display: 'flex' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" />
                        <a-input placeholder="可控接收机本振频点切换指令（0~15）" />
                        <a-input placeholder="滤波器选通指令（0~9）" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令2">
                      <div :style="{ display: 'flex', 'justify-content': 'start' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" :style="{ width: '33.33%' }" />
                        <a-input placeholder="数字滤波器选通指令（16字节）" :style="{ width: '33.33%' }" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
              </a-form-model></a-tab-pane
            >
            <a-tab-pane key="2" tab="导弹2">
              <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路工作参数配置">
                      <a-input v-model="form.region" placeholder="请输入信道号（可以连续，用,号区分）"></a-input>
                      <pool1
                        ref="pool"
                        :total="1920"
                        :small="3"
                        style="width: 100%; height: 250px; overflow-y: auto; padding: 3px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="ballConfig('4-信道')" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="handleSend('4信道授权信息')" type="primary" style="margin-left: 10px">
                    发送</a-button
                  >
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令1">
                      <div :style="{ display: 'flex' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" />
                        <a-input placeholder="可控接收机本振频点切换指令（0~15）" />
                        <a-input placeholder="滤波器选通指令（0~9）" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令2">
                      <div :style="{ display: 'flex', 'justify-content': 'start' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" :style="{ width: '33.33%' }" />
                        <a-input placeholder="数字滤波器选通指令（16字节）" :style="{ width: '33.33%' }" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
              </a-form-model></a-tab-pane
            >
            <a-tab-pane key="3" tab="导弹3">
              <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路工作参数配置">
                      <a-input v-model="form.region" placeholder="请输入信道号（可以连续，用,号区分）"></a-input>
                      <pool1
                        ref="pool"
                        :total="1920"
                        :small="3"
                        style="width: 100%; height: 250px; overflow-y: auto; padding: 3px"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="ballConfig('4-信道')" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="handleSend('4信道授权信息')" type="primary" style="margin-left: 10px">
                    发送</a-button
                  >
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令1">
                      <div :style="{ display: 'flex' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" />
                        <a-input placeholder="可控接收机本振频点切换指令（0~15）" />
                        <a-input placeholder="滤波器选通指令（0~9）" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
                <a-row>
                  <a-col :span="20">
                    <a-form-model-item label="星弹上行链路接收机频率配置指令2">
                      <div :style="{ display: 'flex', 'justify-content': 'start' }">
                        <a-input placeholder="请输入信道号（可以连续，用,号区分）" :style="{ width: '33.33%' }" />
                        <a-input placeholder="数字滤波器选通指令（16字节）" :style="{ width: '33.33%' }" />
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-button @click="creatInstruct" type="primary" style="margin-left: 10px"> 发送</a-button>
                </a-form-model-item>
              </a-col> -->
                </a-row>
              </a-form-model></a-tab-pane
            >
          </a-tabs>
        </a-form-model>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="控制指令发送及响应">
        <!-- <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星弹上行链路工作参数配置">
                <a-select v-model="form1.region" placeholder="请选择" allowClear>
                  <a-select-option value="1"> 指控车1 </a-select-option>
                  <a-select-option value="2"> 指控车2 </a-select-option>
                  <a-select-option value="3"> 指控车3 </a-select-option>
                  <a-select-option value="4"> 指控车4 </a-select-option>
                </a-select>

                <pool ref="pool" :total="1920" :small="0" v-if="form1.region" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星弹下行链路工作参数配置">
                <a-select v-model="form1.speed" placeholder="请选择">
                  <a-select-option value="32kbps"> 32kbps </a-select-option>
                  <a-select-option value="96kbps"> 96kbps </a-select-option>
                  <a-select-option value="256kbps"> 256kbps </a-select-option>
                  <a-select-option value="1024kbps"> 1024kbps </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>

        </a-form-model> -->
      </a-collapse-panel>
    </a-collapse>
    <creat-instruct ref="creatInstruct" />
    <configModal ref="configModal" />
    <a-modal :visible="visible" width="55%" title="资源分配申请表" @cancel="handleOk" @ok="handleOk">
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk"> 退出 </a-button>
      </template>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columnsSQB"
        :dataSource="dataSourceSQB"
        :pagination="ipagination"
        class="j-table-force-nowrap"
      >
        <span slot="action" slot-scope="text, record">
          <!-- <span @click="handleShow(record.processStatus)">查看详情</span> -->
          <a-button @click="handleOk1(record)" type="primary">进入配置</a-button>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import CascaderSelect from './modules/Cascader.vue'
import creatInstruct from './modules/createInstruct'
import { getAction, httpAction } from '@/api/manage.js'
import configModal from './modules/confidModal.vue'
//  <!-- 资源池 -->
import pool1 from './modules/resourcePool1.vue'
import { Turns, hex2int } from '@/utils/util.js'
export default {
  components: { creatInstruct, pool1, CascaderSelect, configModal },
  data() {
    return {
      visible: true,
      columnsSQB: [
        {
          title: '指挥车名称',
          dataIndex: 'car',
          key: 'car',
        },
        {
          title: '导弹总数',
          dataIndex: 'ballNum',
          key: 'ballNum',
        },
        {
          title: '信道号总数（个）',
          dataIndex: 'pll',
          key: 'pll',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSourceSQB: [{ car: '指控车1', ballNum: 3, pll: 30 }],
      text: `world.`,
      value1: 'a',
      value2: '1',
      value3: 'a',
      poolData: [],
      tabActiveKey: '1',
      activeKey: ['1', '2'],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      labelCol1: { span: 8 },
      wrapperCol1: { span: 16 },
      form: {},
      fightForm: { startDate: undefined },
      form1: {},
      formUp: { Values: [], packageGridValue: '' },
      formBall: {},
      resourcesForm: {},
      resourcesList: [],
      resourcesNo: {},
      check: [],
      checkList: [],
      resourcesList: [],
      props: { multiple: true },
      ac: [
        { active: 1, disabled: [] },
        { active: 2, disabled: [] },
        { active: 3, disabled: [] },
        { active: 4, disabled: [] },
      ],
      das: null,
      multipleTreeData: [],
      url: {
        getNmcPackageGridValueByCode: '/grid/nmcPackageGridValue/code',
        nmcPackageGridList: '/grid/nmcPackageGrid/list',
        addnmcPackageGridValue: '/grid/nmcPackageGridValue/add', //{"packageGridValue":"22AA","Values":["22","aa"],"packageGridId":"1663806762680139777"}
      },
    }
  },
  watch: {
    activeKey(key) {
      console.log(key)
    },
  },
  created() {
    for (let i = 0; i < 30; i++) {
      console.log(1232)
      this.resourcesList.push({ label: i, status: 1, disabled: false, active: '' })
    }
    for (let i = 1; i <= 30; i++) {
      this.poolData.push({ id: i, check: false })
    }

    this.getValueByCodeBall()
    // this.getValueByCode()
  },
  // activated() {
  //   for (let i = 1; i <= 30; i++) {
  //     this.poolData.push({ id: i, check: false })
  //   }
  // },
  methods: {
    handleOk() {
      this.$router.back()
    },
    handleOk1(record) {
      this.visible = false
      this.form1 = record
    },
    getValueByCodeBall() {
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('4-信道')}`).then((res) => {
        let temp = res.result
        this.formBall.packageGridId = '4-信道'
        let tempData = Turns(temp.packageGridValue, 4)
        tempData.forEach((i) => {
          this.$refs.pool.subData.find((item) => item.id == i).check = true
        })
        console.log(tempData, 'this.Turns(tempData, 4)')
        // this.$refs.pool1.subData = JSON.parse(JSON.stringify(end))
        // this.upLength = temp.packageGrid.gridStaticLength
        // this.$set(this.formUp, 'Values', [...this.StringToArr(temp.packageGridValue)])
      })
    },
    ballConfig(val) {
      let act = this.$refs.pool.subData.filter((i) => i.check == true)
      let str = ''
      act.forEach((i, index) => {
        str += i.id.toString(16).padStart(4, 0).toUpperCase()
      })
      if (val == '4-信道') {
        this.formBall.packageGridValue = str.toUpperCase()
        httpAction(this.url.addnmcPackageGridValue, this.formBall, 'post').then((res) => {
          this.visibleAdd = false
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, //发送事件
    handleSend(val) {
      let temp = { packageCode: val }
      // this.$refs.selectChannel.showModal(temp)
    },
    handleConfig() {
      this.$refs.configModal.showModal({}, 'ball')
    },
    // 工程量值根据Code回显
    getValueByCode() {
      // let url = escape(` ${this.url.getNmcPackageGridValueByCode}/'8-星指下行链路接收机变频器频点号'`)
      // getAction(url).then((res) => {
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('8-星指下行链路接收机变频器频点号')}`).then(
        (res) => {
          let temp = res.result
          this.form.packageGridId = '8-星指下行链路接收机变频器频点号'
          this.length = temp.packageGrid.gridStaticLength
          this.form.packageGridValue = hex2int(temp.packageGridValue)
          // this.$set(this.form, 'Values', [...this.StringToArr(temp.packageGridValue)])
        }
      )
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('9-星指上行链路接收机变频器频点号')}`).then(
        (res) => {
          let temp = res.result
          this.formUp.packageGridId = '9-星指上行链路接收机变频器频点号'
          this.upLength = temp.packageGrid.gridStaticLength
          this.formUp.packageGridValue = hex2int(temp.packageGridValue) < 1921 ? hex2int(temp.packageGridValue) : '0'
          console.log(temp.packageGridValue, hex2int(temp.packageGridValue))
          // this.$set(this.formUp, 'Values', [...this.StringToArr(temp.packageGridValue)])
        }
      )
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('6-分配给车1的时隙号')}`).then((res) => {
        let temp = res.result
        this.resourcesForm.packageGridId = '6-分配给车1的时隙号'
        let tempData = temp.packageGridValue.slice(-8)
        let data = Turns(tempData, 2).split('')
        let Arr = []
        data.forEach((item, index) => {
          Arr.push({
            id: data.length - index,
            check: item == 0 ? true : false, //可用是1，否是0
          })
        })
        Arr.shift()
        Arr.shift()
        let end = [...Arr.reverse()]
        this.$refs.pool1.subData = JSON.parse(JSON.stringify(end))
      })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('6-分配给指挥车1的时隙个数')}`).then((res) => {
      //   let temp = res.result
      //   this.resourcesNo.packageGridId = '6-分配给指挥车1的时隙个数'
      //   this.resourcesNo.No = res.result.packageGridValue
      // })
    },

    handleValues(val) {
      if (val == '8-星指下行链路接收机变频器频点号') {
        // this.form.packageGridValue = this.form.Values.join('').toUpperCase()
        this.form.packageGridValue = this.form.packageGridValue.toString(16).padStart(4, 0)
        httpAction(this.url.addnmcPackageGridValue, this.form, 'post').then((res) => {
          this.visibleAdd = false
          if (res.success) {
            this.getValueByCode()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      } else if (val == '9-星指上行链路接收机变频器频点号') {
        this.formUp.packageGridValue = this.formUp.packageGridValue.toString(16).padStart(4, 0)
        // this.formUp.packageGridValue = this.formUp.Values.join('').toUpperCase()
        httpAction(this.url.addnmcPackageGridValue, this.formUp, 'post').then((res) => {
          this.visibleAdd = false
          if (res.success) {
            this.getValueByCode()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      } else if (val == '6-分配给车1的时隙号') {
        let subData = this.reverseAndConvert(this.$refs.pool1.subData)
        let str = ''
        subData.forEach((i) => {
          str += i.data
        })
        let strs = str.padStart(62, 1).padStart(64, 0)
        let temp = Turns(strs, 16) //6-分配给车1的时隙号
        this.resourcesForm.packageGridValue = temp
        httpAction(this.url.addnmcPackageGridValue, this.resourcesForm, 'post').then((res) => {
          this.visibleAdd = false
          if (res.success) {
            this.getValueByCode()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })

        this.resourcesNo.packageGridId = '6-分配给指挥车1的时隙个数'
        console.log(this.$refs.pool1.checkGroup)
        this.resourcesNo.packageGridValue = this.$refs.pool1.checkGroup.length.toString(16).padStart(4, 0).toUpperCase() //分配的数值
        console.log(this.resourcesNo, 'this.resourcesNo')
        // return
        httpAction(this.url.addnmcPackageGridValue, this.resourcesNo, 'post').then((res) => {
          this.visibleAdd = false
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
    changeCarCounts(val) {
      this.multipleTreeData = []
      let children = []
      for (let i = 1; i <= 32; i++) {
        children.push({
          id: `${i}-1`,
          value: `导弹${i}`,
          label: `导弹${i}`,
        })
      }
      for (let i = 1; i <= val; i++) {
        this.multipleTreeData.push({
          id: i,
          value: `指挥车${i}`,
          label: `指挥车${i}`,
          children: [...children],
        })
      }
    },

    creatInstruct() {},
    handleCreatInstruct() {
      //指令一键生成
      this.$refs.creatInstruct.showModal(this.fightForm)
      console.log(this.fightForm)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    onSubmit() {
      console.log(this.form)
    },
    onChange1(checkedValues) {
      console.log('checked = ', checkedValues)
    },
    onChange(e) {
      this.resourcesList.forEach((i) => {
        if (i.active == this.tabActiveKey) {
          i.disabled = false
        }
        e.forEach((item) => {
          if (i.label == item) {
            i.disabled = true
            i.active = this.tabActiveKey
          }
        })
      })
    },
    callback(key) {
      this.tabActiveKey = key
      this.ac.forEach((i, index) => {
        if (i.active == this.tabActiveKey) {
          this.ac.splice(index, 1)
        }
      })
    },
    filter(val) {
      if (this.checkList.indexOf(val) != -1) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="less">
.taskAllocation {
  .ant-checkbox-group {
    // height: 300px;
    // line-height: 0.9;
    .ant-checkbox-wrapper {
      margin: 0;
    }
    .ant-col {
      width: auto;
      margin: 0;
    }
  }
}
.tabs .ant-row {
  width: 600px;
  .ant-checkbox-inner {
    width: 40px !important;
    height: 40px !important;
    text-align: center;
    &::after {
      width: 7px;
      height: 14px;
      left: 35%;
    }
  }
}
.ant-checkbox-inner {
  /* background-color: red !important; */
  border-color: #6e6e6e !important;
}
.ant-form-item-control {
  line-height: 0 !important;
}
</style>
